<template>
    <div  class="disconnectP">
     <u-navbar :is-back="true" title="设备报修" back-text="">
      <view
        class="slot-right"
        style="width: 100%; display: flex; justify-content: flex-end"
      >
        <view style="padding: 0rem 0.5rem;display: flex;
align-items: center;">

<img style="width: 0.8rem;
height: 0.8rem;
padding: 0.3rem;" src="../../style/image/stati/A33.png" alt="">
            <view style="
font-size: 0.65rem;
font-family: PingFang SC;
font-weight: 300;" >2020-10</view>
            
        </view>
      </view>
    </u-navbar>

      <!-- <u-modal v-model="modalShow"   :show-title='false' :show-cancel-button=true :content="content"></u-modal> -->
    <view style="background-color: #f3f5f7;
padding: 1rem;" class="repairListsP">
        
          <view  class="repairLists"  v-for="(item,index) in repairLists" :key="index" >
                        <view   @click="orderDetailedM"  class="repairLists-child"  >

                        <view class="repairLists-top">
                                <view style="display: flex;
align-items: center;">
                                   <view  >设备SN号:<span style="font-size: 0.72rem;
font-family: PingFang SC;
font-weight: 400;">876767676</span></view>
                                </view>

                                <!-- <view>租借中</view> -->
                        </view>

                              <view class="repairLists-head">

              <view
                style="
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  margin: 0.2rem 0rem;
                "
              >
                <view
                  style="
                    font-size: 0.72rem;
                    font-family: PingFang SC;
                    font-weight: 300;
                    color: #333333;
                  "
                >
                  报修设备:
                </view>
                <view
                  style="
                    font-size: 0.72rem;
                    font-family: PingFang SC;
                    font-weight: 300;
                    color: #333333;
                  "
                >
                  拉卡拉总代理
                </view>
              </view>


               <view
                style="
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  margin: 0.2rem 0rem;
                "
              >
                <view
                  style="
                    font-size: 0.72rem;
                    font-family: PingFang SC;
                    font-weight: 300;
                    color: #333333;
                  "
                >
                  报修时间:
                </view>
                <view
                  style="
                    font-size: 0.72rem;
                    font-family: PingFang SC;
                    font-weight: 300;
                    color: #333333;
                  "
                >
                  拉卡拉总代理
                </view>
              </view>

         
          
              <view
                style="
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  margin: 0.2rem 0rem;
                "
              >
                <view
                  style="
                    font-size: 0.72rem;
                    font-family: PingFang SC;
                    font-weight: 300;
                    color: #333333;
                  "
                >
                  维修完成:
                </view>
                <view
                  style="
                    font-size: 0.72rem;
                    font-family: PingFang SC;
                    font-weight: 300;
                    color: #333333;
                    width: 11rem;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;"
                >
                  2020.09.03 11:09:29安徽省合肥市安徽省合肥市安徽省省合
                </view>
              </view>
            
            <view
                style="
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  margin: 0.2rem 0rem;
                "
              >
                <view
                  style="
                    font-size: 0.72rem;
                    font-family: PingFang SC;
                    font-weight: 300;
                    color: #333333;
                  "
                >
                  地址:
                </view>
                <view
                  style="
                    font-size: 0.72rem;
                    font-family: PingFang SC;
                    font-weight: 300;
                    color: #333333;
                    width: 11rem;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;"
                >
                  安徽省合肥市瑶海区珍珠路8号区珍珠路8号 区珍珠路8号区珍珠路 
                </view>
              </view>
            
            
            
            </view>
                        </view>


                        <!-- <view :style="{ display: 'flex',justifyContent: 'center',padding: '0.5rem'}">
                            <view class="repairBtn" >维修完成</view>
                        </view> -->
            </view>
        </view>

      
    </div>
</template>

<script lang='ts' >

 import { Component, Prop,Vue, Watch ,Emit} from 'vue-property-decorator'


 @Component({     //   @Component  是一个装修器   不可以在下面写语句
        name: 'test',
    })


    export default class extends Vue {
 
     @Prop({
            type: String, // 父组件传递给子组件的数据类型
            required: false, // 是否必填
            default: ' ' // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
        }) msg!:string;

          public repairLists = [
    {
      mainTitle: "拉卡拉总代理",
      phone:'1234567',
      equipment:'12312312',
      time:'2019-08-23  12:34',
      successTime:'2019-08-28  12:34',
      address:'安徽省合肥市瑶海区珍珠路8号区珍珠路8号区珍珠路8号区珍珠路'
    },
     {
      mainTitle: "拉卡拉总代理",
      phone:'1234567',
      equipment:'12312312',
      time:'2019-08-23  12:34',
      successTime:'2019-08-28  12:34',
      address:'安徽省合肥市瑶海区珍珠路8号区珍珠路8号区珍珠路8号区珍珠路'
    },
     {
      mainTitle: "拉卡拉总代理",
      phone:'1234567',
      equipment:'12312312',
      time:'2019-08-23  12:34',
      successTime:'2019-08-28  12:34',
      address:'安徽省合肥市瑶海区珍珠路8号区珍珠路8号区珍珠路8号区珍珠路'
    },
     {
      mainTitle: "拉卡拉总代理",
      phone:'1234567',
      equipment:'12312312',
      time:'2019-08-23  12:34',
      successTime:'2019-08-28  12:34',
      address:'安徽省合肥市瑶海区珍珠路8号区珍珠路8号区珍珠路8号区珍珠路'
    },
     {
      mainTitle: "拉卡拉总代理",
      phone:'1234567',
      equipment:'12312312',
      time:'2019-08-23  12:34',
      successTime:'2019-08-28  12:34',
      address:'安徽省合肥市瑶海区珍珠路8号区珍珠路8号区珍珠路8号区珍珠路'
    },
  ];
       
         created() {
          }

          mounted() {
              //  console.log('父组件传递的参数:',this.$parent)   //暂时不考虑


          }

    }
</script>

<style  scoped>

.disconnectP{
  background-color: #f3f5f7;
  height: 100vh;
}


.repairLists {
  background-color: white;
  margin-bottom: 1rem;
  border-radius: 0.2rem;
  /* padding: 1rem; */
  /* margin: 1rem; */
}
.repairLists-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.5rem;
  border-bottom: 1px solid #e8e8e8;
}

.repairLists-child {
  border-bottom: 1px solid #e5e5e5;
}
.repairLists-head {
  padding: 1rem;
}
</style>